/*
   project candidates stuff
*/

.pc_selected {
  background: #FF9933;
}

/*    
  tips o=popover stuff
*/





/* Just to center things */
.center {
  margin: 150px auto;
  width: 30px;
  margin-left:-400px;
}

/* The element to hover over */
.qs {
  background-color: rgba(52, 73, 94,0.80);
  border-radius: 16px;
  color: rgba(236, 240, 241,1.0);
  cursor: default;
  display: inline-block;
  font-family: 'Helvetica',sans-serif;
  font-size: 18px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
  position: relative;
  text-align: center;
  width: 30px;
  
  .popover2 {
    background-color: rgba(243, 156, 18,0.90);
    border-radius: 5px;
    bottom: 42px;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    color: #34495e;
    display: none;
    font-size: 12px;
    font-family: 'Open Sans',sans-serif;
    left: -85px;
    padding: 7px 10px;
    position: absolute;
    width: 200px;
    z-index: 4;
    
    &:before {
        border-top: 7px solid rgba(230, 126, 34,0.75);
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        bottom: -7px;
        content: '';
        display: block;
        left: 50%;
        margin-left: -7px;
        position: absolute;
      }
  }
  
  &:hover {
      .popover2 {
        display: block;
        -webkit-animation: fade-in .3s linear 1, move-up .3s linear 1;
        -moz-animation: fade-in .3s linear 1, move-up .3s linear 1;
        -ms-animation: fade-in .3s linear 1, move-up .3s linear 1;
      }
    }
}

@-webkit-keyframes fade-in {
  from   { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fade-in {
  from   { opacity: 0; }
  to { opacity: 1; }
}
@-ms-keyframes fade-in {
  from   { opacity: 0; }
  to { opacity: 1; }
}
@-webkit-keyframes move-up {
  from   { bottom: 30px; }
  to { bottom: 42px; }
}
@-moz-keyframes move-up {
  from   { bottom: 30px; }
  to { bottom: 42px; }
}
@-ms-keyframes move-up {
  from   { bottom: 30px; }
  to { bottom: 42px; }
}






















.localcarousel {
    position: relative;
    box-shadow: 1px 1px 0px rgba(52, 73, 94,0.01);
    }

.localcarousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.localcarousel-open:checked + .localcarousel-item {
    position: static;
    opacity: 100;
}

.localcarousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
    height:500px;
    width:1200px;
}

.localcarousel-item img {
    display: block;
    height: auto;
    max-width: 100%;
}

.localcarousel-control {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
}

.localcarousel-control.prev {
    left: 2%;
}

.localcarousel-control.next {
    right: 2%;
}

.localcarousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#localcarousel-1:checked ~ .control-1,
#localcarousel-2:checked ~ .control-2,
#localcarousel-3:checked ~ .control-3 {
    display: block;
}

.localcarousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.localcarousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.localcarousel-bullet {
    color: #95a5a6;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.localcarousel-bullet:hover {
    color: #f39c12;
}

#localcarousel-1:checked ~ .control-1 ~ .localcarousel-indicators li:nth-child(1) .localcarousel-bullet,
#localcarousel-2:checked ~ .control-2 ~ .localcarousel-indicators li:nth-child(2) .localcarousel-bullet,
#localcarousel-3:checked ~ .control-3 ~ .localcarousel-indicators li:nth-child(3) .localcarousel-bullet {
    color: #f39c12;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}




.info{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    height:300px;
    overflow:auto;
    display:none;
}


// $Var 
$bg-color-1: #4EBA6F;
$bg-color-2: #2D95BF;
$bg-color-3: #fff;
$bg-color-4: #955BA5;
$color: #34495e;

// $Mixin
@mixin size($width , $height: $width ) {
  width: $width;
  height: $height;
}

@mixin fontsize($size: 24, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}

@mixin absPosition ($top: auto, $right: auto, $bottom: auto, $left: auto) {
     position: absolute;
     top: $top;
     right: $right;
     bottom: $bottom;
     left: $left;
}

@mixin opacity($opacity) {
     opacity: $opacity;
     $opacityIE: $opacity * 100;
     filter: alpha(opacity=$opacityIE);
}

@mixin animation($animation...) {
  -o-animation: $animation;
  -moz-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}

@mixin keyframes($name) {
  @-o-keyframes $name { @content };
  @-moz-keyframes $name { @content };
  @-webkit-keyframes $name { @content }; 
  @-keyframes $name { @content };
}


.loaders {
    height: 300px;
    line-height: 190px;
  background-color: $bg-color-1;
  width:100%;
  text-align:center;
  font-size:50px;
  p{
    position: relative;
    top: 160px;

  }
}

.loaders-bg-2 { background-color: $bg-color-2;}
.loaders-bg-3 { background-color: $bg-color-3;}
.loaders-bg-4 { background-color: $bg-color-4;}

.loader {
  display: inline-block;
    position: relative;
  @include size(50px);
    vertical-align: middle;
}

/*  $Loader Quadrant
    ========================================================================== */

.loader-quart {
    border-radius: 50px;
    border: 6px solid rgba(255,255,255,0.4);
 &:after {
    content: '';
    @include absPosition(-6px, -6px, -6px, -6px);
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: $color;
    @include animation(spin 1s linear infinite);
 }
}

/*  $Loader Double circle
    ========================================================================== */

.loader-double {
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: $color;
    border-bottom-color: $color;
  @include animation(spin 1.5s linear infinite);
  &:before,
  &:after {
    content: '';
    @include absPosition(5px, 5px, 5px, 5px);
    border-radius: 50px;
    border: 6px solid transparent;
    border-top-color: $color;
    border-bottom-color: $color;
    @include opacity(0.6);
    @include animation(spinreverse 2s linear infinite);
  }
  &:before {
    top: 15px; 
    left: 15px;
    bottom: 15px;
    right: 15px;
    @include animation(spinreverse 3s linear infinite);
  }
}

/*  $Loader Multiple circle
    ========================================================================== */

.loader-circles {
    border-radius: 50px;
    border: 3px solid transparent;
    border-top-color: #fff;
  @include animation(spin 1s linear infinite);
  &:before,
  &:after {
    content: '';
    @include absPosition(5px, 5px, 5px, 5px);
    border-radius: 50px;
    border: 3px solid transparent;
    border-top-color: $color;
    @include opacity(0.8);
    @include animation(spinreverse 5s linear infinite);
  }
  &:before {
    top: 12px; 
    left: 12px;
    bottom: 12px;
    right: 12px;
    @include animation(spinreverse 10s linear infinite);
  }
}

/*  $Loader Bars
    ========================================================================== */

.loader-bars:before,
.loader-bars:after,
.loader-bars span {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  @include size(10px, 30px);
    background-color: $color;
  @include animation(grow 1.5s linear infinite);
}

.loader-bars:after {
    left: 15px;
  @include animation(grow 1.5s linear -.5s infinite);
}

.loader-bars span {
    left: 30px;
  @include animation(grow 1.5s linear -1s infinite);
}

@include keyframes(grow) {
    0% { -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
    50% { -webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1;}
    100% { -webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
}

@include keyframes(spin) {
    0%{ -webkit-transform: rotate(0deg); tranform: rotate(0deg);}
    100%{ -webkit-transform: rotate(360deg); tranform: rotate(360deg);}
}

@include keyframes(spinreverse) {
    0%{ -webkit-transform: rotate(0deg); tranform: rotate(0deg);}
    100%{ -webkit-transform: rotate(-360deg); tranform: rotate(-360deg);}
}


.shimmer {
  font-weight: 300;
  font-size: 3em;
  margin: 0 auto;
  padding: 0 140px 0 0;
  display: inline;
  margin-bottom: 0;
}
.shimmer {
  text-align: center;
  color: rgba(52, 73, 94,0.1);
  background: -webkit-gradient(linear, left top, right top, from(#34495e), to(#34495e), color-stop(0.5, #fff));
  background: -moz-gradient(linear, left top, right top, from(#34495e), to(#34495e), color-stop(0.5, #fff));
  background: gradient(linear, left top, right top, from(#34495e), to(#34495e), color-stop(0.5, #fff));
  -webkit-background-size: 125px 100%;
  -moz-background-size: 125px 100%;
  background-size: 125px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #34495e;
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}

.wpper{
  width:80%;
  margin-left:auto;
  margin-right:auto;
}

#container {
  width: 320px;
  height: 500px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: 0px;
  margin-left: -160px;
  overflow: hidden;
  margin-top:20px;
  
  &.details {
    .list-view {
      background: transparent;
      transition: background 0.5s;
      pointer-events: none;
      li {
        transition: transform 0.3s, opacity 0.2s;

        &:not(.active) {
          opacity: 0;
        }
        &.active {
          transform: translate3d(0, 80px, 0);  
          border-color: rgba(255,255,255,0);
          transition: transform 0.3s, opacity 0.2s, border-color 0.2s;

          &:hover {
            background: none;
          }
        }
      }
    }
    .details-view {
      .back {
        transform: scale(1);
      }
      .background {
        transform: translate3d(0,-110px,0);
        transition: transform 0.25s 0.05s;
      }
      li {
        @for $i from 1 through 4 {
          &:nth-child(#{$i}) {
            transform: translate3d(0,0,0);
          } 
        }
      }
      ul{
      border-style: solid;
      border-width: 0px;
      border-color: #bdc3c7;
      }
    }
  }
  
  .list-view {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255,255,255,1);
    z-index: 1;
    transition: background 0.3s 0.1s;
    overflow:auto;


    ul {
      li {
        position: absolute;
        left: 0;
        right: 0;
        height: 70px;
        border-width:0px;
        border-bottom-width: 0px;
        border-style: solid;
        border-color: #ddd;
        transition: transform 0.3s, opacity 0.3s 0.3s, border-color 0.3s 0.3s;

        .name {
          -webkit-font-smoothing: antialiased;
        }

        @for $i from 1 through 20 {
          &:nth-child(#{$i}) {
            transform: translate3d(0, ($i - 1) * 70px, 0);
          }
        }


      }
    }
  } 
}

.project{
  content: ‘’;
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  border-radius: 50%;
  background-size: 100%;
  margin: 30px 20px;
}
.pcandidate{
  height:70px;
}



.pre  {
  position: absolute;
  left: 30%;
  margin-top: 0px;
  margin-left: 0px;
}